<template>
	<div class="wrap">
      <v-carousel :list="list" :wpTitle="carTitle"></v-carousel>
      <v-tabs :tabList="tabList" :tabs="tabs" @getData="getData"></v-tabs>
      <div class="news_box">
         <ul>
            <li v-for="(item,index) in newList">
               <router-link :to="'/msg_article?c='+ c +'&id=' + (index+1) ">{{ item.title }}</router-link>
               <span>{{ item.date }}</span>
            </li>
         </ul>
         <v-page :pages='pagerList'></v-page>
      </div>
	</div>
</template>

<script>
import vCarousel from './components/carousel'
import vPage from './components/page'
import vTabs from './components/tabs'
export default {
   data() {
   	return {
         list: [],
         carTitle: '',
         c: '',
         tabList: [],
         newList: [],
         pagerList: [],
         tabs: true
   	}
	},
   components: {
      vCarousel,vPage,vTabs
   },
   methods: {
      getData (identifier){
         // ajax获取数据
         let _this = this;
         this.ajax('?c=list&cs='+identifier+'&wxapp_skin=', function (res){
            _this.newList = res.data.data;
            _this.pagerList = res.data.data2;
            _this.tabList = res.data.data3;
            _this.carTitle = res.data.data4.cate_name;
            _this.c = res.data.data4.identifier;
            if (_this.tabList.length <= 3) {
               _this.tabs = true;
            }else{
               _this.tabs = false;
            }
         });
      }
   },
   mounted (){

      let _this = this;

      // ajax获取数据
      this.ajax('?c=list&cs=news&wxapp_skin=', function (res){
         _this.newList = res.data.data;
         _this.pagerList = res.data.data2;
         _this.tabList = res.data.data3;
         _this.carTitle = res.data.data4.cate_name;
         _this.c = res.data.data4.identifier;
         if (_this.tabList.length <= 3) {
            _this.tabs = true;
         }else{
            _this.tabs = false;
         }
         _this.list = _this.$store.getters.getCar;
      });

   }
}
</script>

<style scoped>
   .news_box{overflow:hidden; padding: 0 .05rem;}
   .news_box li{height: .32rem;border-bottom: 1px solid #e2e2e2; margin-bottom: .1rem; background: url(../assets/arrow.png) left center no-repeat;padding-left:.2rem; }
   .news_box li a{color: #5a5a5a; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:75%; float:left; display:inline-block; line-height: .32rem; }
   .news_box li a:hover{color: #0064D4;}
   .news_box li span{color: #929292; font-size:.12rem; float:right; line-height: .32rem; }
</style>